<template>
  <div>
    <el-dialog
        v-model="dialogVisible"
        fullscreen>
      <div style="height: 100vh;position: relative;">
        <SnakerFlowDesigner ref='designer' :viewer="true" v-model="flowDataRef" @on-save="handleSave" :showDoc="false" />
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, defineProps, defineExpose,onMounted, watch } from 'vue'
import SnakerFlowDesigner from '@/SnakerFlowDesigner'

const dialogVisible = defineModel({
  default: false
})
const flowDataRef = ref(null)

const props = defineProps({
  flowData: {
    type: Object,
    required: false
  },
  // 当前流程定义行
  record: {
    type: Object,
    required: false
  }
})

onMounted(() => {
  flowDataRef.value = props.flowData
})

// 方式1:监听属性变化,动态设置
watch(() => props.flowData, () => {
  flowDataRef.value = props.flowData
})

// 方法2:通过$refs修改,定义要暴露的方法
function show(flowData) {
  flowDataRef.value = flowData;
  console.log('设置flowDataRef为', flowData)
  dialogVisible.value = true;
}

// 暴露方法
defineExpose({
  show
})

function handleCloseModal(){
  dialogVisible.value = false
}

</script>

<style scoped>

</style>
